function buy(i){
	var sum = document.querySelector(".sum");
	var sum_price = document.querySelector(".sum-price");
	var one_amount = document.querySelectorAll(".one-amount");
	var minus_btn = document.querySelectorAll(".minus");
	var add_btn = document.querySelectorAll(".add");
	var price = document.querySelectorAll(".one-price");
	var buy_box =  document.querySelector(".buy-box");
	var layer_box = document.querySelector(".layer-box");
	var name = document.querySelectorAll(".name");
	var layer_ul = document.querySelector(".layer-content-ul");
	var one_input = document.querySelectorAll(".input1");
	var total_input = document.querySelector(".input2");
	var num = 0;
		add_btn[i].addEventListener(
			"touchstart",
			function() {
	 			one_amount[i].innerText = parseInt(one_amount[i].innerText)+1;
	 			sum.innerText = parseInt(sum.innerText)+1;
	 			sum_price.innerText = parseInt(sum_price.innerText)+parseInt(price[i].innerText);
	 			sum_price.innerText = sum_price.innerText.toString()+".00";
	 			//在购物车内显示添加的商品
	 			var lis = document.querySelector(".layer").getElementsByTagName("li");
	 			var food_name = document.querySelectorAll(".food-name");
	 			var food_amount = document.querySelectorAll(".food-amount");
				// console.log(lis.length);
				removeClass(lis[i],"hide");
				food_name[i].innerText = trim(name[i].innerText);
				food_amount[i].innerText = parseInt(food_amount[i].innerText)+1+"份";
				//
				one_input[i].value =one_amount[i].innerText;
				total_input.value = sum_price.innerText;
				console.log(total_input.value);
	 			//在购物车内添加
	 			// var li=document.createElement("li");
	 			// var span1 = document.createElement("span");
	 			// var span2 = document.createElement("span");
	 			// addClass(li,"food-li");
	 			// var lis = document.querySelectorAll(".food-li");
	 			// addClass(span1,"food-name");
	 			// addClass(span2,"food-amount");
	 			// span1.innerText = name[0].innerText;
	 			// span2.innerText = "一份";
	 			// li.appendChild(span1);
	 			// li.appendChild(span2);
	 			// layer_ul.appendChild(li);	
			}
 		);
 		minus_btn[i].addEventListener(
			"touchstart",
			function() {
	 			if(parseInt(one_amount[i].innerText)>0){
	 				if(parseInt(one_amount[i].innerText)>0){
	 					one_amount[i].innerText = parseInt(one_amount[i].innerText)-1;
	 				}
	 				if(parseInt(sum.innerText)>0){
						sum.innerText = parseInt(sum.innerText)-1;
					}
	 				if(parseInt(sum_price.innerText)>0){
	 					sum_price.innerText = parseInt(sum_price.innerText)-parseInt(price[i].innerText);
						sum_price.innerText = sum_price.innerText.toString()+".00";
					}
				}
				total_input.value = sum_price.innerText;
				console.log(total_input.value );
				one_input[i].value =one_amount[i].innerText;
				console.log(one_input[i].value);
				var lis = document.querySelector(".layer").getElementsByTagName("li");
	 			var food_name = document.querySelectorAll(".food-name");
	 			var food_amount = document.querySelectorAll(".food-amount");
				food_amount[i].innerText = parseInt(food_amount[i].innerText)-1+"份";
				if( parseInt(food_amount[i].innerText)<1){
					food_amount[i].innerText = 0;
					addClass(lis[i],"hide");
				}
				

				
			}
 		);
	}

 
 function buycar(i){
 	var sum = document.querySelector(".sum");
	var sum_price = document.querySelector(".sum-price");
	var one_amount = document.querySelectorAll(".one-amount");
	var price = document.querySelectorAll(".one-price");
	var name = document.querySelectorAll(".name");
	var layer_ul = document.querySelector(".layer-content-ul");
	var one_input = document.querySelectorAll(".input1");
	var total_input = document.querySelector(".input2");
	var btn1 = document.querySelectorAll(".btn1");
	var btn2 = document.querySelectorAll(".btn2");
	var num = 0;
	btn2[i].addEventListener(
			"touchstart",
			function() {
	 			one_amount[i].innerText = parseInt(one_amount[i].innerText)+1;
	 			sum.innerText = parseInt(sum.innerText)+1;
	 			sum_price.innerText = parseInt(sum_price.innerText)+parseInt(price[i].innerText);
	 			sum_price.innerText = sum_price.innerText.toString()+".00";
	 			//在购物车内显示添加的商品
	 			var lis = document.querySelector(".layer").getElementsByTagName("li");
	 			var food_name = document.querySelectorAll(".food-name");
	 			var food_amount = document.querySelectorAll(".food-amount");
				// console.log(lis.length);
				removeClass(lis[i],"hide");
				food_name[i].innerText = trim(name[i].innerText);
				food_amount[i].innerText = parseInt(food_amount[i].innerText)+1+"份";
				//
				one_input[i].value =one_amount[i].innerText;
				total_input.value = sum_price.innerText;
				console.log(total_input.value);
			}
 		);
	btn1[i].addEventListener(
			"touchstart",
			function() {
	 			if(parseInt(one_amount[i].innerText)>0){
	 				if(parseInt(one_amount[i].innerText)>0){
	 					one_amount[i].innerText = parseInt(one_amount[i].innerText)-1;
	 				}
	 				if(parseInt(sum.innerText)>0){
						sum.innerText = parseInt(sum.innerText)-1;
					}
	 				if(parseInt(sum_price.innerText)>0){
	 					sum_price.innerText = parseInt(sum_price.innerText)-parseInt(price[i].innerText);
						sum_price.innerText = sum_price.innerText.toString()+".00";
					}
				}
				total_input.value = sum_price.innerText;
				console.log(total_input.value );
				one_input[i].value =one_amount[i].innerText;
				console.log(one_input[i].value);
				var lis = document.querySelector(".layer").getElementsByTagName("li");
	 			var food_name = document.querySelectorAll(".food-name");
	 			var food_amount = document.querySelectorAll(".food-amount");
				food_amount[i].innerText = parseInt(food_amount[i].innerText)-1+"份";
				if( parseInt(food_amount[i].innerText)<1){
					food_amount[i].innerText = 0;
					addClass(lis[i],"hide");
				}
				

				
			}
 		);
 }


function trim(str) {
return str.replace(/(^\s+)|(\s+$)/g, "");
}
 function css(obj, attr, value) {
    switch (arguments.length) {
       	case 2:
            if (typeof arguments[1] == "object") {    //批量设置属性
                for (var i in attr) obj.style[i] = attr[i]
            }
            else { // 读取属性值
                return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, null)[attr]
            }
         	break;
        case 3:
                    //设置属性
        obj.style[attr] = value;
            break;
        default:
            return "";
    }
}
function siblings(elm) {
	var a = [];
	var p = elm.parentNode.children;
	for(var i =0,pl= p.length;i<pl;i++) {
	if(p[i] !== elm) a.push(p[i]);
	}
	return a;
}
function hasClass(obj, cls) {
    return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}
function addClass(obj, cls) {
    if (!this.hasClass(obj, cls)) obj.className += " " + cls;
}

function removeClass(obj, cls) {
    if (hasClass(obj, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        obj.className = obj.className.replace(reg, ' ');
    }
}
function tabFood(obj,tabobj){
	obj.addEventListener(
		"touchstart",
		function(){
			addClass(obj,"active");
			css(tabobj,"display","block");
			for(var i=0;i<siblings(obj).length;i++){
				removeClass(siblings(obj)[i],"active");
				css(siblings(tabobj)[i],"display","none");
			}
		}
	);
}




window.onload = function(){
	var food1 = document.querySelector("#food1");
	var food2 = document.querySelector("#food2");
	var sum_price = document.querySelector(".sum-price");
	var sum = document.querySelector(".sum");
	var box1 =  document.querySelector("#box1");
	var box2 =  document.querySelector("#box2");

	var one_amount = document.querySelectorAll(".one-amount");
	var price = document.querySelectorAll(".one-price");

	var layer = document.querySelector(".layer");
	var layer_top = document.querySelector(".layer-top");
	var buy_box =  document.querySelector(".buy-box");
	var layer_box = document.querySelector(".layer-box");
	var layer_ul = document.querySelector(".layer-content-ul");
	var clear_btn = document.querySelector(".clear-btn");

	var name = document.querySelectorAll(".name");
	var container = document.querySelector(".container");
	var down_img = document.querySelector(".down-img");

	down_img.addEventListener(
		"touchstart",
		function(e) {
			layer.style.display = "none";
			container.style.display = "block";
		}
	);
	buy_box.addEventListener(
		"touchstart",
		function(e) {
			layer.style.display = "block";
			container.style.display = "none";
			e.stopPropagation();
		}
	);
	layer_top.addEventListener(
		"touchstart",
		function(e) {
			layer.style.display = "none";
			container.style.display = "block";
		}
	);

	var ul_box = document.querySelector(".ul-box");
	var ul_box_lis = ul_box.getElementsByTagName('li');
	var food_box = document.querySelectorAll(".food-box");
	var main_box = document.querySelector(".main");
	addClass(ul_box_lis[0],"active");
	css(food_box[0],"display","block");

    for(var n = 1;n<ul_box_lis.length;n++){
 		css(food_box[n],"display","none");
    }
	for(var n = 0;n<ul_box_lis.length;n++){
		tabFood(ul_box_lis[n],food_box[n]);
	}
	
	// console.log(main_box.getElementsByTagName("li").length);
	//在购物车内把所有商品添加进去。但是一开始是隐藏状态

	var span_amount = document.querySelectorAll(".foot-amount");
	var span_name = document.querySelectorAll(".foot-name");
	for(var a=0;a<main_box.getElementsByTagName("li").length;a++){
	 	buy(a);
	 	var li=document.createElement("li");
	 	var span1 = document.createElement("span");
	 	var span2 = document.createElement("span");
	 	var btn1 = document.createElement("button");
	 	var btn2 = document.createElement("button");
	 	addClass(btn1,"btn1");
	 	addClass(btn2,"btn2");
	 	btn1.innerText = "-";
	 	btn2.innerText = "+";
	 	addClass(li,"food-li");
	 	var lis = document.querySelectorAll(".food-li");
	 	addClass(span1,"food-name");
	 	addClass(span2,"food-amount");
	 	span1.innerText = name[a].innerText;
	 	span2.innerText = 0;
	 	li.appendChild(span1);
	 	li.appendChild(span2);
	 	li.appendChild(btn1);
	 	li.appendChild(btn2);
	 	layer_ul.appendChild(li);	
	 	addClass(li,"hide");
	 	buycar(a);
	}


	

	//清空购物车
	clear_btn.addEventListener(
		"touchstart",
		function(e) {
			var lis = document.querySelector(".layer").getElementsByTagName("li");
		 	var food_name = document.querySelectorAll(".food-name");
		 	var food_amount = document.querySelectorAll(".food-amount");
			sum.innerText = 0;
			sum_price.innerText = 0;
			for(var i=0;i<one_amount.length;i++){
					one_amount[i].innerText = 0;
					food_amount[i].innerText = 0;
					addClass(lis[i],"hide");
			}
			e.stopPropagation();
		}
	);

	 simpScroller(main_box,{
    	verticalScroll: true,          // 默认垂直滚动
	    horizontalScroll: false,       // 水平滚动，默认false，不水平滚动
	    hideScrollBar: true        // 是否隐藏滚动条      // 滚动时候的回调
	                                   // 支持一个参数，为event对象 
	});

	//购物车滚动条
    simpScroller(layer,{
    	verticalScroll: true,          // 默认垂直滚动
	    horizontalScroll: false,       // 水平滚动，默认false，不水平滚动
	    hideScrollBar: true        // 是否隐藏滚动条      // 滚动时候的回调
	                                   // 支持一个参数，为event对象 
	});
  






}